<!-- 轮播图 -->
<template>
    <div class="swiper">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="orange">
            <van-swipe-item><img src="https://img02.hua.com/slider/21_brand_banner.png?v2" alt=""></van-swipe-item>
            <van-swipe-item><img src="https://img02.hua.com/slider/22_birthday.jpg" alt=""></van-swipe-item>
            <van-swipe-item><img src="https://img02.hua.com/slider/17_xingzuo_shizi_app.jpg" alt=""></van-swipe-item>
        </van-swipe>
        <div class="swiper-ment">
            <div><i class="sw_ment">√</i>认准龙头企业</div>
            <div><i class="sw_ment">√</i>17年产品</div>
            <div><i class="sw_ment">√</i>3小时送</div>
            <div><i class="sw_ment">√</i>最近468674条好</div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Swiper",
}
</script>
<style scoped lang="less">
.my-swipe {
    margin: 0 .24rem;
}

.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    border-radius: .1rem;
    overflow: hidden;
}

.my-swipe .van-swipe-item img {
    width: 100%;
}


.custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
}

.swiper-ment {
    margin: 0 .24rem;
    display: flex;
    justify-content: space-between;
    color: #71797f;
    font-size:.22rem;
    height:.6rem;
    align-items: center;
    .sw_ment {
        display: inline-block;
        padding:.02rem;
        width: .2rem;
        height: .2rem;
        font-size:.2rem;
        background: #71797f;
        border-radius: 50%;
        color: #fff;
    }
}
</style>